<script setup>
import { ref } from 'vue'

const { safeAreaInsets, statusBarHeight } = uni.getWindowInfo()
const custom = uni.getMenuButtonBoundingClientRect()
const customBarHeight = custom.bottom + ((custom.top - statusBarHeight) <= 4 ? (custom.top - statusBarHeight) + 4 : (custom.top - statusBarHeight))

const tn = () => {
	console.log(statusBarHeight)
	console.log(customBarHeight)
}
</script>

<template>
	<view class="message tn-safe-area-inset-bottom">
		
		<xb-nav-bar>
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn()">
			  <view class="custom-nav__back" style="heiht: 80rpx">
			    <view class="tn-icon-clear tn-color-cat" style="font-size: 50rpx;">
			    </view>
			  </view>
			</view>
		</xb-nav-bar>
		<!--<view class="tn-custom-nav-bar-class tn-custom-nav-bar" style="height:91px;position:fixed;z-index:29090">
			<view class="tn-custom-nav-bar__bar tn-custom-nav-bar__bar--fixed" style="height:91px;padding-top:47px;background-color:#FFFFFF;z-index:29090">
				<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn()">
				  <view class="custom-nav__back" style="heiht: 80rpx">
				    <view class="tn-icon-clear tn-color-cat" style="font-size: 50rpx;">
				    </view>
				  </view>
				</view>
			</view>
		</view>-->
		
		<view class="tn-margin-top-sm tn-padding-bottom-lg">
			
			<view class="tn-flex tn-message-fixed" :style="{ 'padding-top': safeAreaInsets?.top + 41 + 'px' }">
				<view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
				    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				      <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
				        <view class="tn-icon-reply">
				        </view>
				      </view>  
				      <view class="tn-color-black tn-text-center">
				        <text class="tn-text-ellipsis">互 动</text>
				      </view>
				    </view>
				  </view>
				  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
				    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				      <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
				        <view class="tn-icon-like">
				        </view>
				      </view>  
				      <view class="tn-color-black tn-text-center">
				        <text class="tn-text-ellipsis">爱 心</text>
				      </view>
				    </view>
				  </view>
				  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
				    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				      <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
				        <view class="tn-icon-star">
				        </view>
				      </view>  
				      <view class="tn-color-black tn-text-center">
				        <text class="tn-text-ellipsis">收 藏</text>
				      </view>
				    </view>
				  </view>
				  <view class="tn-flex-1 tn-padding-sm tn-margin-xs tn-radius">
				    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
				      <view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
				        <view class="tn-icon-notice">
				        </view>
				      </view>  
				      <view class="tn-color-black tn-text-center">
				        <text class="tn-text-ellipsis">通 知</text>
				      </view>
				    </view>
				  </view>
				</view>
		</view>
	</view>
</template>

<style lang="scss">
.message{
	max-height: 100vh;
}

/* 自定义导航栏内容 start */
.custom-nav {
	height: 100%;
	
	&__back {
		margin: auto 5rpx;
		font-size: 40rpx;
		margin-right: 10rpx;
		flex-basis: 5%;
		width: 100rpx;
		position: absolute;
	}
}
/* 自定义导航栏内容 end */

/* 底部安全边距 start*/
.tn-tabbar-height {
	min-height: 120rpx;
	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	height: calc(140rpx + constant(safe-area-inset-bottom));
}

.tn-message-fixed{
	position: fixed;
	background-color: rgba(255,255,255,1);
	box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	top: 0;
	width: 100%;
	transition: all 0.25s ease-out;
	z-index: 100;
}



/* 图标容器1 start */
.icon1 {
	&__item {
		width: 30%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;
		
		&--icon {
			width: 90rpx;
			height: 90rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;
			
			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
			}
		}
	}
}

.tn-color-cat{
	color: #1D2541;
}

/* 页面阴影 start*/
.tn-cat-shadow {
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}


/* 标签*/
.tag{
	margin: 10rpx 0 10rpx 10rpx;
	color: #7C8191;
	background-color: #F3F2F7;
	padding: 4rpx 14rpx 6rpx;
	border-radius: 10rpx;
	font-size: 20rpx;
}

/* 图标容器15 start */
.icon15 {
	&__item {
		width: 30%;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 20rpx 10rpx;
		transform: scale(1);
		transition: transform 0.3s linear;
		transform-origin: center center;
		
		&--icon {
			width: 105rpx;
			height: 105rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;
			
			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;

					
			}
		}
	}
}
</style>